<template>
	<view class="modifyphone">
		<!-- 顶部导航 -->
		<diyNavBar value='绑定支付宝'></diyNavBar>
		<view class="modify-item">
			<view class="left">真实姓名</view>
			<input type="text" v-model="setData.ali_name" placeholder="请输入姓名"/>
		</view>
		<view class="modify-item">
			<view class="left">支付宝账号</view>
			<input type="text"  v-model="setData.ali_number" placeholder="请输入支付宝账号"/>
		</view>
		<view class="modify-item">
			<view class="left">收款码</view>
			<view class="imgbox" @click="addimg">
				<text>+</text>
				<image :src="$util.img(avatar)" mode="aspectFill"></image>
				<text class="iconfont icon-jiufuqianbaoicon08" v-if="avatar" @click.stop="avatar = ''"></text>
			</view>
		</view>
		<button type="default" class="determine" @click="btn">确定修改</button>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	export default{
		components:{diyNavBar},
		data(){
			return {
				setData:{
					ali_number:'',
					ali_name:'',
					ali_image:''
				},
				judgenum:false,
				avatar:''
			}
		},
		onLoad() {
			this.$http.sendrequest('/member/Personalsz',{},{
				tokenJudge:true
			}).then(res=>{
				if(res.code == 1){
					this.setData = {
						ali_name:res.data.ali_name,
						ali_number:res.data.ali_number,
						ali_image:res.data.ali_image
					}
					this.avatar = res.data.ali_image
				}
			})
		},
		onShow(){
			
		},
		methods:{
			addimg(){
				this.$util.selectImage({
					num:1,
					success:res=>{
						if(res.judge){
							let url = JSON.parse(res.data).data[0].filepath;
							url = url.split('/uploads')[1]
							this.avatar = url;
						}
					}
				})
			},
			btn(){
				this.setData.ali_image = this.avatar;
				if(!this.setData.ali_number && !this.setData.ali_name) {
					uni.showToast({title:'输入请勿为空',icon:'none'});
					return false;
				}
				if(this.judgenum) return false;
				this.judgenum = true
				this.$http.sendrequest('/member/Alipaybd',this.setData,{
					tokenJudge:true
				}).then(res=>{
					uni.showToast({title:res.msg,icon:'none'});
					this.judgenum = false
					if(res.code == 1){
						setTimeout(()=>{
							uni.navigateBack({delta: 1});
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modifyphone{
		min-height: 100vh;
		background: $uni-content-background-color;

		.modify-item{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			min-height: 120rpx;
			background: #FFFFFF;
			font-size: 28rpx;
			border-bottom: 2rpx solid rgba(0,0,0,.02);
			.left{
				width:140rpx;
				margin-right: 40rpx;
			}
			input{
				width: calc(60% - 120rpx);
				height: 80%;
				text-align: left;
				font-size: 28rpx;
			}
			.imgbox{
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 160rpx;
				font-size: 36rpx;
				border:1rpx solid rgba(0,0,0,.1);
				position: relative;
				margin: 20rpx 0;
				.icon-jiufuqianbaoicon08{
					position: absolute;
					top: -84rpx;
					right: -20rpx;
					font-size: 36rpx;
				}
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			.code{
				width: 198rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				color: #FFFFFF;
				background: #FF6F30;
				font-size: 24rpx;
				border-radius: 52rpx;
				margin: 0 0 0 24rpx;
			}
		}
		.determine{
			margin: 0 30rpx;
			width: auto;
			background: $uni-tabbar-hovercolor;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top:70rpx;
			border-radius: 80rpx;
		}
	}

</style>
